<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="专区详情"></fa-navbar>
		<u-sticky :enable="enable"><fa-zone-header :zone="zone"></fa-zone-header></u-sticky>
		<view class="u-p-l-10 u-m-t-20">
			<u-tabs
				:list="tabsList"
				:is-scroll="true"
				bg-color="#f4f6f8"
				active-color="#000"
				:bar-width="barwidth"
				inactive-color="#000"
				:current="current"
				:active-item-style="{ backgroundColor: '#fff', borderTopLeftRadius: '6rpx', borderTopRightRadius: '6rpx', boxShadow: '0 0 10px rgba(0, 87, 142, 0.1)' }"
				:bar-style="{ backgroundColor: 'rgb(255 255 255 / 0)' }"
				@change="change"
			></u-tabs>
		</view>
		<!-- 问题列表 -->
		<block v-if="again_type == 'question'"><fa-question-item :isCard="false" :questionList="dataList"></fa-question-item></block>
		<!-- 文章列表 -->
		<block v-else><fa-article-items :isCard="false" :list="dataList"></fa-article-items></block>
		<!-- 空数据 -->
		<wanl-empty style="padding:0;" v-if="isEmpty"></wanl-empty>
		<!-- 加载更多 -->
		<view class="u-p-t-30 u-p-b-30" v-if="!isEmpty"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 确认框 -->
		<u-modal v-model="show" :content="content" confirm-text="返回" :confirm-color="theme.bgColor" @confirm="confirm"></u-modal>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { styleRest } from '@/common/fa.mixin.js';
export default {
	mixins: [styleRest],
	onLoad(e) {
		let query = this.$Route.query || e || {};
		this.id = query.id  || '';
		this.diyname = query.diyname || '';
		this.getZoneShow();
	},
	data() {
		return {
			id: 0,
			enable: false,
			barwidth: 40,
			current: 0,
			isEmpty: false,
			tabsList: [],
			dataList: [],
			zone: {},
			type: 'question',
			page: 1,
			has_more: false,
			show: false,
			content: '',
			status: 'loadmore',
			is_again: false,
			again_type: 'question'
		};
	},
	methods: {
		change(index) {
			this.current = index;
			//重设Bar宽度
			this.barwidth = this.$util.strlen(this.tabsList[index].name) * 30;
			this.type = this.tabsList[index].value;
			this.page = 1;
			this.is_again = true;
			this.getZoneShow();
		},
		getZoneShow: async function() {
			let res = await this.$api.getZoneShow({ id: this.id,diyname:this.diyname, page: this.page, type: this.type });
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if (this.is_again) {
				this.dataList = [];
				this.again_type = this.type;
				this.is_again = false;
			}
			if (res.data.zoneConditionList) {
				this.zone = res.data.zone;
				this.show = true;
				let info = [];
				for (let i in res.data.zoneConditionList) {
					info.push(res.data.zoneConditionList[i]);
				}
				this.content = `此专区针对[${info.join('/')}]的用户开放`;
				return;
			}
			this.zone = res.data.zone;
			if (this.tabsList.length != res.data.tabsList.length) {
				this.tabsList = res.data.tabsList;
			}
			//分页简洁判断
			if (this.vuex_config.pagesimple.indexOf(this.type) != -1) {
				this.has_more = res.data.dataList.has_more;
			} else {
				this.has_more = res.data.dataList.last_page > res.data.dataList.current_page;
			}
			if (this.again_type == 'question') {
				res.data.dataList.data.map(this.setStyle);
			}
			this.dataList = this.dataList.concat(res.data.dataList.data);
			this.isEmpty = !this.dataList.length;
		},
		//更多的问题列表
		getQuestionList: async function() {
			let res = await this.$api.getQuestionList({
				page: this.page,
				zone_id: this.id,
				flag: 'flag'
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			//分页简洁判断
			if (this.vuex_config.pagesimple.indexOf('question') != -1) {
				this.has_more = res.data.has_more;
			} else {
				this.has_more = res.data.last_page > res.data.current_page;
			}
			res.data.data.map(this.setStyle);
			this.dataList = this.dataList.concat(res.data.data);
		},
		//更多的文章列表
		getArticleList: async function() {
			let res = await this.$api.getArticleList({
				page: this.page,
				zone_id: this.id
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			//分页简洁判断
			if (this.vuex_config.pagesimple.indexOf('article') != -1) {
				this.has_more = res.data.has_more;
			} else {
				this.has_more = res.data.last_page > res.data.current_page;
			}
			this.dataList = this.dataList.concat(res.data.data);
		},
		confirm() {
			this.$Router.back(1);
		}
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.type == 'question' ? this.getQuestionList() : this.getArticleList();
		}
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}

.u-row .u-btn {
	padding: 0 40rpx;
}
</style>
